<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">

    <style>
        .table  thead  tr  th {
            vertical-align: bottom;
            border-bottom: 0px solid #ddd;}
        .name{ float: right;}
        .row{ margin: 0;}
        .shop-img{ text-align: left; padding-left: 30px;}
        .shop-img img{ margin-right: 10px;}
        .panel-body{ padding-bottom:15px; }
        thead{ font-size: 14px;}
        td{font-size: 13px; border-bottom: 1px solid #ddd;}
        h1 {
            display: block;
            margin-bottom: 20px;
            border-bottom: 1px solid #999;
            font-size: 16px;
            padding-left: 2px;
            font-weight: bold;
            line-height: 35px;
        }
        h2{
            display: block;
            margin-bottom: 20px;
            font-size: 16px;
            padding-left: 2px;
            font-weight: bold;
            line-height: 35px;
        }
        .form-control {
            border: none;
            box-shadow: none;
            margin-top: 3px;
            background-color: transparent;
        }
    </style>
</head>
<body>
<div id="page">
    <div class="panel panel-lzy">
        <div class="panel panel-f5">
            <div class="panel-body row">
                <div class="form-horizontal">
                    <h1>● 当前信息</h1>
                    <ul class="tips-list-lzy">
                        <input type="hidden" id="_ctx" value="${basePath}"/>
                        <input type="hidden" id="id" name="id"/>
                        <div class="form-group">
                            <span class="control-label col-sm-2 col-xs-4  detail-span">姓名：</span>
                            <div class="col-sm-2 col-xs-4">
                                <span class="form-control" v-text="name"></span>
                            </div>
                            <div class="col-sm-5 col-xs-4">
                                <span class="control-label col-sm-2 col-xs-4  detail-span">手机号：</span>
                                <div class="col-sm-2 col-xs-4">
                                    <span class="form-control" v-text="phone"></span>
                                </div>
                            </div>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="panel-body panel-white">
    <#--<div class="panel panel-f5">-->
        <h2>下级信息</h2>
            <div class="table-responsive">
                <table class="table table-hover" data-pageSize="10,50,100" data-method="GET">
                    <thead>
                    <!-- 需要循环的字段  对应mapper文件-->
                    <tr>
                        <th  data-type="id" width="10%">序号</th>
                        <th  data-field="name" width="10%">姓名</th>
                        <th  data-field="phone" width="15%">代理商手机</th>
                        <th  data-field="agentNumber" data-call="true" width="15%">代理商编号</th>
                        <th  data-field="location" data-call="true" width="15%">所在地</th>
                        <th  data-field="createTime" data-call="true" width="15%">成为代理商时间</th>
                        <th  data-field="system" data-call="true" width="10%">所属体系</th>
                        <th  data-field="state" data-call="true" width="5%">状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in goodsList">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.phone}}</td>
                        <td>{{item.agentNumber}}</td>
                        <td>{{item.location}}</td>
                        <td>{{item.createDate}}</td>
                        <td>{{item.system}}</td>
                        <td v-if="item.state==0">正常</td>
                        <td v-if="item.state==1">禁用</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="${basePath}/bootstrap/js/vue.min.js" type="text/javascript"></script>
<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">

<script type="text/javascript">

    var vue = new Vue({
        el: "#page",
        data: {
            id: null,
            name: "",
            phone: "",
            goodsList:[],
            dataObj: {}
        },
        methods: {},
        created: function(){
            var _this = this;
            var cur = window.location.href.split("?");
            var curArr = cur[cur.length-1];
            curArr = curArr.split("&");
            this.id = curArr[0].split("=")[1];
            this.name = decodeURI(curArr[1].split("=")[1]);
            this.phone = curArr[2].split("=")[1];
            $.ajax({
                url: '${basePath}/admin/agent/manage/searchChilds',
                type: 'GET',
                dataType: 'json',
                data: {
                    id: _this.id
                },
                success: function(data){
                    _this.goodsList = data.result;
                },
                error: function(){
                    console.log("error")
                }
            })
        }
    })

</script>
</body>
</html>